<template>
  <div class="resource-list">
    <!-- 列表工具栏 -->
    <div class="list-toolbar">
      <div class="toolbar-left">
        <div class="breadcrumb">
          <a-breadcrumb>
            <a-breadcrumb-item
              v-for="(item, index) in breadcrumbItems"
              :key="index"
            >
              <a @click="handleBreadcrumbClick(item, index)">{{ item.name }}</a>
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <div class="list-title">
          <h3>{{ title }}</h3>
          <span class="resource-count">共 {{ totalCount }} 个资源</span>
        </div>
      </div>

      <div class="toolbar-right">
        <!-- 视图切换 -->
        <a-radio-group v-model="viewMode" size="small">
          <a-radio-button value="table">
            <IconifyIcon icon="ant-design:table-outlined" />
            表格
          </a-radio-button>
          <a-radio-button value="card">
            <IconifyIcon icon="ant-design:appstore-outlined" />
            卡片
          </a-radio-button>
        </a-radio-group>

        <!-- 搜索和过滤 -->
        <a-space>
          <a-input
            v-model="searchKeyword"
            placeholder="搜索资源名称或编码"
            allow-clear
            style="width: 200px"
            @change="handleSearch"
          >
            <template #prefix>
              <IconifyIcon icon="ant-design:search-outlined" />
            </template>
          </a-input>

          <a-select
            v-model="resourceTypeFilter"
            placeholder="资源类型"
            allow-clear
            style="width: 120px"
            @change="handleFilterChange"
          >
            <a-select-option value="PHYSICAL">物理资源</a-select-option>
            <a-select-option value="HUMAN">人力资源</a-select-option>
            <a-select-option value="DIGITAL">数字资源</a-select-option>
            <a-select-option value="SERVICE">服务资源</a-select-option>
          </a-select>

          <a-select
            v-model="statusFilter"
            placeholder="状态"
            allow-clear
            style="width: 100px"
            @change="handleFilterChange"
          >
            <a-select-option value="1">启用</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
          </a-select>
        </a-space>
      </div>
    </div>

    <!-- 资源列表内容 -->
    <div class="list-content">
      <!-- 表格视图 -->
      <div v-if="viewMode === 'table'" class="table-view">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :loading="loading"
          :pagination="pagination"
          :row-selection="rowSelection"
          @change="handleTableChange"
          row-key="id"
          size="middle"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <div class="resource-name" @click="handleResourceClick(record)">
                <IconifyIcon
                  :icon="record.icon || 'ant-design:file-outlined'"
                  :style="{ color: record.color || '#666' }"
                />
                <div class="name-info">
                  <span class="name">{{ record.name }}</span>
                  <span class="code">{{ record.code }}</span>
                </div>
              </div>
            </template>
            <template v-else-if="column.key === 'resource_type'">
              <a-tag :color="getResourceTypeColor(record.resource_type)">
                {{ record.resource_type_name }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'business_type'">
              <a-tag :color="getBusinessTypeColor(record.business_type)">
                {{ record.business_type_name }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'status'">
              <a-tag :color="record.status === 1 ? 'green' : 'red'">
                {{ record.status === 1 ? '启用' : '禁用' }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button type="link" size="small" @click="handleView(record)">
                  查看
                </a-button>
                <a-button type="link" size="small" @click="handleEdit(record)">
                  编辑
                </a-button>
                <a-button
                  type="link"
                  size="small"
                  @click="handleDelete(record)"
                >
                  删除
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>

      <!-- 卡片视图 -->
      <div v-else class="card-view">
        <a-row :gutter="16">
          <a-col
            v-for="resource in dataSource"
            :key="resource.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <a-card
              class="resource-card"
              :class="{
                selected: selectedResourceId === resource.id.toString(),
              }"
              hoverable
              @click="handleResourceClick(resource)"
            >
              <template #cover>
                <div class="card-cover">
                  <IconifyIcon
                    :icon="resource.icon || 'ant-design:file-outlined'"
                    :style="{
                      color: resource.color || '#666',
                      fontSize: '32px',
                    }"
                  />
                </div>
              </template>

              <template #title>
                <div class="card-title">
                  <span class="name">{{ resource.name }}</span>
                  <a-tag
                    :color="resource.status === 1 ? 'green' : 'red'"
                    size="small"
                  >
                    {{ resource.status === 1 ? '启用' : '禁用' }}
                  </a-tag>
                </div>
              </template>

              <template #extra>
                <a-dropdown>
                  <a-button type="text" size="small">
                    <IconifyIcon icon="ant-design:more-outlined" />
                  </a-button>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item @click="handleView(resource)">
                        <IconifyIcon icon="ant-design:eye-outlined" />
                        查看
                      </a-menu-item>
                      <a-menu-item @click="handleEdit(resource)">
                        <IconifyIcon icon="ant-design:edit-outlined" />
                        编辑
                      </a-menu-item>
                      <a-menu-item @click="handleDelete(resource)">
                        <IconifyIcon icon="ant-design:delete-outlined" />
                        删除
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </template>

              <div class="card-content">
                <p class="description">{{ resource.description }}</p>
                <div class="tags">
                  <a-tag
                    :color="getResourceTypeColor(resource.resource_type)"
                    size="small"
                  >
                    {{ resource.resource_type_name }}
                  </a-tag>
                  <a-tag
                    :color="getBusinessTypeColor(resource.business_type)"
                    size="small"
                  >
                    {{ resource.business_type_name }}
                  </a-tag>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { IconifyIcon } from '@vben/icons';

interface Props {
  title?: string;
  totalCount?: number;
  dataSource?: any[];
  loading?: boolean;
  pagination?: any;
  selectedResourceId?: string;
  breadcrumbItems?: any[];
  columns?: any[];
  rowSelection?: any;
}

interface Emits {
  (e: 'search', keyword: string): void;
  (e: 'filter-change', filters: any): void;
  (e: 'table-change', pagination: any): void;
  (e: 'resource-click', resource: any): void;
  (e: 'view', resource: any): void;
  (e: 'edit', resource: any): void;
  (e: 'delete', resource: any): void;
  (e: 'breadcrumb-click', item: any, index: number): void;
}

const props = withDefaults(defineProps<Props>(), {
  title: '资源列表',
  totalCount: 0,
  dataSource: () => [],
  loading: false,
  pagination: () => ({}),
  selectedResourceId: '',
  breadcrumbItems: () => [],
  columns: () => [],
  rowSelection: undefined,
});

const emit = defineEmits<Emits>();

const viewMode = ref('table');
const searchKeyword = ref('');
const resourceTypeFilter = ref<string | null>(null);
const statusFilter = ref<string | null>(null);

const handleSearch = () => {
  emit('search', searchKeyword.value);
};

const handleFilterChange = () => {
  emit('filter-change', {
    resourceType: resourceTypeFilter.value,
    status: statusFilter.value,
  });
};

const handleTableChange = (pagination: any) => {
  emit('table-change', pagination);
};

const handleResourceClick = (resource: any) => {
  emit('resource-click', resource);
};

const handleView = (resource: any) => {
  emit('view', resource);
};

const handleEdit = (resource: any) => {
  emit('edit', resource);
};

const handleDelete = (resource: any) => {
  emit('delete', resource);
};

const handleBreadcrumbClick = (item: any, index: number) => {
  emit('breadcrumb-click', item, index);
};

const getResourceTypeColor = (type: string) => {
  const resourceTypeConfig = {
    PHYSICAL: '#52c41a',
    HUMAN: '#1890ff',
    DIGITAL: '#722ed1',
    SERVICE: '#fa8c16',
  };
  return resourceTypeConfig[type as keyof typeof resourceTypeConfig] || '#666';
};

const getBusinessTypeColor = (type: string) => {
  const businessTypeConfig = {
    HOTEL: '#1890ff',
    APARTMENT: '#52c41a',
    SPA: '#eb2f96',
    SCENIC: '#13c2c2',
    RESTAURANT: '#fa8c16',
    MEDICAL_BEAUTY: '#722ed1',
    BEAUTY_SALON: '#eb2f96',
  };
  return businessTypeConfig[type as keyof typeof businessTypeConfig] || '#666';
};
</script>

<style lang="less" scoped>
.resource-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;

  .list-toolbar {
    background: #fff;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toolbar-left {
      .breadcrumb {
        margin-bottom: 8px;
      }

      .list-title {
        display: flex;
        align-items: center;
        gap: 12px;

        h3 {
          margin: 0;
          font-size: 18px;
        }

        .resource-count {
          font-size: 14px;
          color: #888;
        }
      }
    }

    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
  }

  .list-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;

    .table-view,
    .card-view {
      background: #fff;
      border-radius: 6px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .resource-name {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;

        &:hover {
          color: #1890ff;
        }

        .name-info {
          display: flex;
          flex-direction: column;
        }
      }

      .resource-card {
        &.selected {
          border: 1px solid #1890ff;
          box-shadow: 0 0 10px rgba(24, 144, 255, 0.3);
        }

        .card-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100px;
          background: #f0f2f5;
          border-radius: 4px 4px 0 0;
        }

        .card-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .card-content {
          .description {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
          }
        }
      }
    }
  }
}
</style>
